<template>
  <div id="mycelst"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.mycelst();
  },
  methods: {
    mycelst() {
      let mycelst = this.$echarts.init(document.getElementById("mycelst"));
      mycelst.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: [
            "V线Mu",
            "云状Mura",
            "Pad Mura",
            "V bright line",
            "v dark line",
            "斜纹mura",
            "下偏光板异物",
            "1个亮点",
            "cell 内异物",
            "cell内脏污",
            "上偏光板异物",
            "cell漏光",
            "total",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          height:220,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "V线Mu",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: [320, 302, 301, 334, 390, 330, 320],
          },
          {
            name: "云状Mura",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Pad Mura",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            // data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "V bright line",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            // data: [150, 212, 201, 154, 190, 330, 410],
          },
          {
            name: "v dark line",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            // data: [820, 832, 901, 934, 1290, 1330, 1320],
          },
          {
            name: "斜纹mura",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            // data: [820, 832, 901, 934, 1290, 1330, 1320],
          },
          {
            name: "下偏光板异物",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            // data: [820, 832, 901, 934, 1290, 1330, 1320],
          },
          {
            name: "1个亮点",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            // data: [820, 832, 901, 934, 1290, 1330, 1320],
          },
          {
            name: "cell 内异物",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: [820, 832, 91, 934, 1290, 330, 320],
          },
          {
            name: "cell内脏污",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: [820, 832, 901, 934, 1290, 330, 320],
          },
          {
            name: "cell漏光",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: [820, 832, 901, 934, 1290, 130, 120],
          },
          {
            name: "上偏光板异物",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: [820, 82, 91, 234, 129, 130, 320],
          },
          {
            name: "total",
            type: "line",
            lineStyle: {
              normal: {
                type: "dashed",
                color: "#000",
              },
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["90%", "90%"],
            },
            data: [1200, 1350, 490, 1630, 1720, 1820, 1970],
          },
        ],
      });
    },
  },
};
</script>

<style  scoped>
#mycelst {
  width:1000px;
  height: 300px;
  /* box-shadow: 0px 0px 0px 2px gainsboro; */
  /* border: 1px solid blue; */
}
</style>